<template>
  <div class="header opacity-ling">
    <router-link to="/">
      <div class="header-left">
        <img
          class="header-img"
          src="@/assets/img/shouyu.jpg"
          alt=""
        >
        <h1 class="main-title">首页</h1>
      </div>
    </router-link>
    <div class="header-right">
      <div class="div-el-widht">
        <el-input
          v-model="input"
          class="header-sousuo"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
          ></i>
        </el-input>
      </div>
      <div
        class="div-text cursor-p"
        v-for="(item,index) in textList"
        :key="index"
        @mouseover="mouver(index)"
        @mouseout="mouout(index)"
      >
        {{item.title}}
        <i class="el-icon-caret-bottom"></i>
        <ul
          class="cascader"
          :style="{display: isNone === index ? 'block':''}"
        >
          <li
            v-for="(item_er,index) in item.secondar_ymenu"
            :key="index"
          >{{item_er}}</li>
        </ul>
      </div>
      <div
        class="login-bot"
        @click="loginMode"
      >
        Login
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaDer',
  data() {
    return {
      input: '',
      textList: [
        {
          title: '暂时没有东西',
          secondar_ymenu: ['暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西'],
        },
        {
          title: '暂时没有东西',
          secondar_ymenu: ['暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西'],
        },
        {
          title: '暂时没有东西',
          secondar_ymenu: ['暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西'],
        },
        {
          title: '暂时没有东西',
          secondar_ymenu: ['暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西', '暂时没有东西,暂时没有东西'],
        },
      ],
      isNone: '',
    }
  },
  methods: {
    mouver(index) {
      this.isNone = index
    },
    mouout(index) {
      this.isNone = null
    },
    loginMode() {
      this.$router.push({ path: '/login', query: { mode: 0 } })
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 3.6rem;
  z-index: 10;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: 1px solid #eaecef;
  padding: 0.7rem 1.5rem;
  top: 0;
  @include dif-juspb-alic;

  .header-left {
    display: flex;
    margin-left: 2rem;
    width: 200px;

    .header-img {
      height: 2.2rem;
      min-width: 2.2rem;
      margin-right: 0.8rem;
      vertical-align: top;
    }

    .main-title {
      color: $textColor;
      font-weight: 600;
      font-size: 1.5rem;
    }
  }

  .header-right {
    @include dif-alc;
    // width: 700px;

    .header-sousuo ::v-deep .el-input__inner {
      border-radius: 30px;
      height: 35px;
    }
    .header-sousuo ::v-deep .el-input__icon {
      line-height: 35px;
      font-size: 18px;
      color: rgb(158, 158, 158);
    }

    .div-el-widht {
      width: 30%;
      margin-right: 2%;
    }

    .div-text {
      position: relative;
      width: 120px;
      height: 30px;
      font-size: 0.9rem;
      font-weight: 500;
      color: #2c3e50;
      text-align: center;
      margin: 0 10px;
      line-height: 30px;
      display: inline-block;
      z-index: 20;

      .cascader {
        position: absolute;
        border: 1px solid;
        border-color: #ddd #ddd #ccc;
        text-align: left;
        border-radius: 0.25rem;
        white-space: nowrap;
        background-color: #fff;
        padding: 0.6rem 1.25rem;
        box-sizing: border-box;
        overflow-y: auto;
        top: 130%;
        right: 10px;
        text-align: left;
        list-style: none;
        display: none;
      }
    }

    .login-bot {
      width: 80px;
      margin-left: 20px;
      height: 31px;
      line-height: 29px;
      border-radius: 20px;
      text-align: center;
      color: $textColor;
      font-size: 14px;
    }
    .login-bot:hover {
      border-color: #409eff;
      color: #409eff;
      background-color: #ebf7ff;
    }
  }
}
</style>